<template>
    <!-- 数据为空（通用组件） -->

    <view class="info" :style="{ 'margin-bottom': bottom, height: height, width: width }">
        <!--        <view class="icon saasIcon" :style="{ color: color || varCss.color , 'font-size': size }">-->
        <!--            <view class="saasIcon" :style="{ 'font-size': iconSize }">&#xe707;</view>-->
        <!--        </view>-->
        <u-image :src="`${cdn}none/${type}.png`" :width="width" mode="widthFix" />
        <view class="tips" :style="{ color: textColor, 'font-size': size }">
            {{ title }}
        </view>
    </view>
</template>

<script>
export default {
    name: "NoMore",
    props: {
        type: {
            type: [Number, String],
            default: 1
        },
        title: {
            type: String, // 提示语
            default: "~ 暂无内容 ~"
        },
        icon: {
            type: String, // 图标
            default: "\ue869"
        },
        color: {
            type: String,
            default: ""
        },
        textColor: {
            type: String,
            default: "#999"
        },
        customColor: {
            type: String,
            default: ""
        },
        height: {
            type: String,
            default: "50vh"
        },
        iconSize: {
            type: String,
            default: "250rpx"
        },
        size: {
            type: String,
            default: "28rpx"
        },
        width: {
            type: String,
            default: "270"
        },
        bottom: {
            type: String,
            default: "30rpx"
        }
    },
    data() {
        return {};
    }
};
</script>

<style lang="scss">
.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
        .saasIcon {
            color: var(--color);
        }
        image {
            width: 300rpx;
            height: 300rpx;
        }
    }

    .tips {
        margin-top: 30rpx;
        color: #999999;
    }
}
</style>
